{% extends 'knowledge/base.html' %}

{% block title %}{{ collection_name }} - 知识库管理系统{% endblock %}

{% block content %}
<div class="max-w-6xl mx-auto">
    <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
        <div class="flex items-center">
            <a href="{% url 'knowledge:index' %}" class="text-neutral hover:text-primary mr-4">
                <i class="fa fa-arrow-left"></i>
            </a>
            <div>
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">{{ collection_name }}</h2>
                <p class="text-neutral mt-1">管理此集合中的文档内容</p>
            </div>
        </div>
        <div class="mt-4 md:mt-0 flex space-x-3">
            <a href="{% url 'knowledge:search_collection' collection_name %}" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
                <i class="fa fa-search mr-2"></i>搜索文档
            </a>
            <a href="{% url 'knowledge:add_document' collection_name %}" class="inline-flex items-center px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors shadow-sm">
                <i class="fa fa-plus mr-2"></i>添加文档
            </a>
        </div>
    </div>

    {% if documents %}
    <div class="bg-white rounded-xl overflow-hidden card-shadow">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral-dark uppercase tracking-wider">标题</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral-dark uppercase tracking-wider">内容预览</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral-dark uppercase tracking-wider">操作</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    {% for doc in documents %}
                    <tr class="hover:bg-gray-50 transition-colors">
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-medium text-gray-900">{{ doc.title }}</div>
                            <div class="text-xs text-neutral mt-1">ID: {{ doc.id }}</div>
                        </td>
                        <td class="px-6 py-4 max-w-md">
                            <div class="text-sm text-gray-500 line-clamp-2">{{ doc.text }}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <div class="flex space-x-2">
                                <a href="{% url 'knowledge:view_document' collection_name doc.id %}" class="text-primary hover:text-primary/80">查看</a>
                                <a href="{% url 'knowledge:edit_document' collection_name doc.id %}" class="text-secondary hover:text-secondary/80">编辑</a>
                                <a href="{% url 'knowledge:delete_document' collection_name doc.id %}" class="text-red-600 hover:text-red-500">删除</a>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% else %}
    <div class="bg-white rounded-xl p-8 text-center card-shadow">
        <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
            <i class="fa fa-file-text-o text-primary text-2xl"></i>
        </div>
        <h3 class="text-lg font-semibold text-gray-800 mb-2">集合中暂无文档</h3>
        <p class="text-neutral mb-6 max-w-md mx-auto">此知识库集合中尚未添加任何文档，点击下方按钮开始添加文档</p>
        <a href="{% url 'knowledge:add_document' collection_name %}" class="inline-flex items-center px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors shadow-sm">
            <i class="fa fa-plus mr-2"></i>添加文档
        </a>
    </div>
    {% endif %}
</div>
{% endblock %}